<template>
    <li>
        <div :class="{'tree-item-title': true, 'tree-item-selected': initNodeValue && model[valueField] === initNodeValue}"  @click="toggle">
            <div @click="handleClick(model, isParent)" class="text">
                <span></span>
                <span>{{model[textField]}}</span>
            </div>
            <span v-if="isParent" class="trigger"><img :src="open ? img.collapse : img.expand"></span>
        </div>
        <ul v-show="open || openInited" v-if="isParent" class="tree-item-sub">
            <tree-item v-for="(item, index) in model[childrenField]"
                :key="index"
                :model="item"
                :text-field="textField"
                :value-field="valueField"
                :expand-node-path="expandNodePath"
                :init-node-value="initNodeValue"
                :children-field="childrenField">
            </tree-item>
        </ul>
    </li>
</template>

<script>

import expandImg from '@/assets/images/tree/expand.png'
import collapseImg from '@/assets/images/tree/collapse.png'


export default {
    name: 'tree-item',
    data() {
        return {
            open: false,
            img: {
                expand: expandImg,
                collapse: collapseImg
            },
            selected: false
        }
    },

    props: {
        model: Object,
        textField: {
            type: String,
            default: 'name'
        },
        valueField: {
            type: String,
            default: 'id'
        },
        childrenField: {
            type: String,
            default: 'children'
        },
        initNodeValue: String | Number,
        expandInitNode: Boolean,
        expandNodePath: Array
    },

    computed: {
        isParent: function() {
            return !!(
                this.model[this.childrenField] &&
                this.model[this.childrenField].length
            )
        },

        openInited() {
            return !this.selected && this.expandNodePath && this.expandNodePath.indexOf(this.model[this.valueField]) != -1
        }
    },

    created() {
        this.open = this.openInited
    },

    methods: {
        
        toggle() {
            if (this.isParent) {
                this.open = !this.open
            }
        },

        expand() {
            if (this.isParent && !this.open) {
                this.open = true
            }
        },

        handleClick(model, isParent) {
            let parent = this.$parent;
            if (parent.$options.name == 'tree-item' && parent.handleClick) {
                parent.handleClick(model, isParent)
            } else {
                this.$emit('item-clicked', {
                    isParent: isParent,
                    data: model
                })
            }

            this.selected = true
        }
    }
}
</script>


<style lang="scss" scoped>
$padding-y: 5px;
.tree-item-title {
    font-size: 18px;
    padding: $padding-y 0;
    text-align: left;
    position: relative;

    &:active {
        background-color: #45a8ff
    }

    &.tree-item-selected {
        background-color: #eeeeee;
    }

    .text {
        display: inline-block;
        padding-left: 3px;
        width: 100%;
        
    }

    .trigger {
        position: absolute;
        padding: $padding-y ;
        top: 0;
        right: 0;
    }
}

.tree-item-sub {
    padding-left: 16px;
}
</style>
